<template>
<div class="sound-zone" >
    <div class="zone-title" :id="id">
        <slot></slot>
    </div>
    <div class="zone-body">
        <ZoneItem
        v-for="(item) in list"
        :key="item.id"
        :item="item"
        ></ZoneItem>
    </div>
</div>
</template>

<script>
import ZoneItem from "components/catalogList/ZoneItem"
export default {
    props:['list','id'],
    components:{
        ZoneItem
    }
}
</script>

<style lang="stylus" scoped>
.sound-zone
      width 100%
      min-height 4rem
      padding-bottom .16rem
      margin 0.1rem auto
      .zone-title
        height .2rem
        line-height .2rem
        margin .1rem auto 
        display flex
        justify-content flex-start
        align-items center
        padding 0 .14rem
        font-size .16rem
        &:before
          content ""
          display block
          height 80%
          width 0.04rem
          background-color #000
          border-radius 0.04rem
          margin-right .06rem
      .zone-body
        margin 0 0.14rem
</style>